import React from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import util from '@/utils';
import {Button, FormInstance, message, Popconfirm} from 'antd';
import {ModalForm, ProFormText} from '@ant-design/pro-form';

import styles from '@/common/index.less';
import {ActionType} from '@ant-design/pro-table/lib/typing';

const queryTableData = async () => {
   const {data} = await util.request({
      url: `/shop`
   });
   return data;
};


const saveTableData = async (data: ShopItem) => {
   const {code} = await util.request({
      url: `/shop`,
      method: 'POST',
      data: {
         ...data
      }
   });
   code === 200 ? message.success('修改成功') : message.warn('修改失败');
};

const deleteTableData = async (id: number) => {
   const {code} = await util.request({
      url: `/shop/${id}`,
      method: 'DELETE'
   });
   if (code === 200) {
      message.success('删除成功');
      return await queryTableData();
   } else {
      message.warn('删除失败');
   }
};


export default function ShopItem() {

   const modalState = React.useState<boolean>();

   const formRef = React.useRef<FormInstance>();
   const tableRef = React.useRef<ActionType>();

   return <PageContainer
      className={styles.pageContainer}
      extra={[
         <Button type='primary' onClick={() => {
            modalState[1](true);
            formRef.current?.resetFields();
         }}>
            添加
         </Button>
      ]}>

      <ProTable<ShopItem>
         actionRef={tableRef}
         bordered
         columns={[
            {
               dataIndex: 'name',
               title: '名称',
               width: 200

            },
            {
               dataIndex: 'reward',
               title: '积分数',
               width: 200

            },
            {
               dataIndex: 'icon',
               title: '图标',
               valueType: 'image',
               width: 240
            },
            {
               dataIndex: 'represent',
               title: '简介',
               width: 240,
               ellipsis: true
            },
            {
               title: '操作',
               width: 100,
               valueType: 'option',
               render: (text: any, record: any, _: any, action: any) => [
                  <a onClick={() => {
                     formRef.current?.setFieldsValue(record);
                     modalState[1](true);
                  }}>
                     编辑
                  </a>,
                  <Popconfirm title={'是否需要删除'} onConfirm={() => {
                     deleteTableData(record.id);
                     action.reset();
                  }}>
                     <a>
                        删除
                     </a>
                  </Popconfirm>
               ]
            }
         ]}
         request={async () => {
            return Promise.resolve({
               data: await queryTableData(),
               success: true
            });
         }}
         rowKey='id'
         pagination={false}
         toolBarRender={false}
         search={false}
      />
      <ModalForm<ShopItem>
         title='编辑商城'
         formRef={formRef}
         width={600}
         layout='horizontal'
         labelAlign='right'
         labelCol={{span: 5}}
         visible={modalState[0]}
         modalProps={{
            closable: true,
            onCancel: () => modalState[1](false)
         }}
         onFinish={async (values) => {
            await saveTableData(values);
            modalState[1](false);
            tableRef.current?.reset && tableRef.current?.reset();
         }}
      >
         <ProFormText
            width='md'
            name='id'
            hidden
            rules={[{required:true}]}
         />
         <ProFormText
            width='md'
            name='name'
            label='名称'
            rules={[{required:true}]}
            placeholder='请输入名称'
         />
         <ProFormText
            width='md'
            name='reward'
            label='积分数'
            rules={[{required:true}]}
            placeholder='请输入积分数'
         />
         <ProFormText
            width='md'
            name='icon'
            label='图标地址'
            rules={[{required:true}]}
            placeholder='请输入图标地址'
         />
         <ProFormText
            width='md'
            name='represent'
            label='简介'
            rules={[{required:true}]}
            placeholder='请输入简介'
         />
      </ModalForm>
   </PageContainer>;
}
